<template>
  <div class="bottom-view">
    <el-card class="view" shadow="hover">
      <template v-slot:header>
        <div>分类销售排行榜</div>
        <el-radio-group v-model="selectRadio" size="small">
          <el-radio-button label="品类">品类</el-radio-button>
          <el-radio-button label="商品">商品</el-radio-button>
        </el-radio-group>
      </template>
      <div class="search-view">
        <!-- 插入可视化图表 -->
        <v-chart :option="getPieOption()" autoresize></v-chart>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
export default {
  name: 'MockView'
}
</script>
<script lang="ts" setup>
// 引入组合式Api
import {computed, reactive, ref} from 'vue'
// 引入创建数据仓库对象函数
import {useDataStore} from '@/stores/reportData'
const dataStore = useDataStore() // 获取数据仓库对象

const selectRadio = ref<string>('品类')

// 计算属性 
const saleRank = computed(() => dataStore.reportData.saleRank)
// 计算饼图数据
const pieData = computed(() => {
  const data = {
    categoryList: [] as any, // 品类数组
    categoryTotal: 0, // 品类总数
    goodsList: [] as any, // 商品列表
    goodsTotal: 0, // 商品总数
  }
  // 判断数据是否存在
  if (saleRank.value) {
    // 解构
    const {category: {axisX: axisX1, data1: data1}, goods: {axisX: axisX2, data1: data2}} = saleRank.value
    // 计算品类总数
    data.categoryTotal = data1.reduce((total, current) => current += total, 0)
    // 计算商品总数
    data.goodsTotal = data2.reduce((total, current) => current += total, 0)
    // 处理数据 'name | 百分百' 形式
    axisX1.forEach((item, index) => {
      const percent = ((data1[index]/data.categoryTotal) * 100).toFixed(2) + '%'
      data.categoryList.push({
        name: item + '|' + percent,
        percent,
        labelName: item,
        value: data1[index],
      })
    })
    axisX2.forEach((item, index) => {
      const percent = ((data2[index]/data.goodsTotal) * 100).toFixed(2) + '%'
      data.goodsList.push({
        name: item + '|' + percent,
        percent,
        labelName: item,
        value: data2[index]
      })
    })
  }
  return data
})
// 配置
const getPieOption = () => {
  // 解构数据
  const {categoryList, categoryTotal, goodsList, goodsTotal} = pieData.value
  // 动态获取图表数据
  const listData = selectRadio.value === '品类'? categoryList : goodsList
  // 动态获取子标题内容
  const total = selectRadio.value === '品类'? categoryTotal : goodsTotal
  return {
    // 标题
    title: [
      {
        text: `${selectRadio.value}分布`, // 主标题
        textStyle: {fontSize: 14, color: '#666'}, // 字体样式
        left: 20, // 位置
        top: 20,
      },
      {
        text: `累计订单量`, // 副标题
        textStyle: {fontSize: 14, color: '#999'},

        subtext: total, // 副标题文本
        subtextStyle: {fontSize: 28, color: '#333'},
        left: '34.5%',
        top: '43.5%',
        textAlign: 'center' // text 和 subtext的对齐方式
      }
    ],
    // 提示框组件
    tooltip: {
      trigger: 'item', // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      formatter: function(params: any) { // 第一个参数 params 是 formatter 需要的数据集 ，提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
      // seriesName 系列名称 
      // marker 点
      // data 传入的数据 77行
        return `
          ${params.seriesName}<br /> 
          ${params.marker}${params.data.labelName}<br />
          ${params.marker}数量：${params.value}<br />
          ${params.marker}占比：${params.percent}%<br />
        `
      }
    },
    // 图例组件 右侧
    legend: {
      top: 'center',
      left: '70%',
      orient: 'vertical' // 布局朝向 垂直
    },
    // 系列组件
    series: [
      {
        name: `${selectRadio.value}分布`,
        type: 'pie', // 饼图
        center: ['35%', '50%'], // 圆心坐标
        radius: ['40%', '55%'], // 饼图的半径 内半径 外半径
        avoidLabelOverlap: false, // 是否启用防止标签重叠策略 默认开启
        itemStyle: {
          // 设置周围的边框样式
          borderRadius: 2, // 圆角
          borderColor: '#fff', //边框颜色
          borderWidth: 2 // 边框宽度
        },
        label: {
          // 图表中的文字标签
          show: true,
          position: 'outside',
          formatter: function (params: any) {
            return params.data.labelName
          }
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 10
        },
        // 数据
        data: listData
      }
    ]
  }
}
</script>
<style lang="scss" scoped>
.bottom-view{
  margin-top: 20px;
  display: flex;
  .view{
    flex: 1;
    &:first-child {
      margin-right: 10px;
    }
    &:last-child {
      margin-left: 10px;
    }

    :deep(.el-card__header) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }

    .search-view{
      display: flex;
      flex-direction: column;
      height: 450px;


      .chart-wrap {
        display: flex;
        .chart {
          flex: 1;
          &:first-child {margin-right: 5px;}
          &:last-child {margin-left: 5px;}
          .title {
            font-size: 14px;
            color: #999;
          }
          .count {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }
          .echarts {
            height: 50px;
          }
        }
      }

    }
  }
}
</style>